<script setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'
const charts = ref()
onMounted(() => {
  const myChart = echarts.init(charts.value)
  let indicatorList = [
    { name: '百度', max: 100 },
    { name: '官网', max: 100 },
    { name: '视频', max: 100 },
    { name: '搜索', max: 100 },
    { name: '社交', max: 100 },
  ];
  const option = {
    color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
    title: {
      text: '业务指标',
      left: 'center',
      textStyle: {
        fontSize: 22,
        color: '#08d3e7',
      }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      containLabel: true
    },
    tooltip: {
      show: true ,
    },
    legend: {
      data: [
        {
          name: '告警', icon: 'rect', itemStyle: {
            color: '#ff4d4d', borderWidth: 0
          },
        },
        {
          name: '预警', icon: 'rect', itemStyle: {
            color: '#0290ff', borderWidth: 0
          }
        },
        {
          name: '缺陷', icon: 'rect', itemStyle: {
            color: '#ffe533', borderWidth: 0
          }
        },
        {
          name: '巡检', icon: 'rect', itemStyle: {
            color: '#06f5bc', borderWidth: 0
          }
        },
      ],
      show: true,
      y: '1',
      center: 0,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 26,
      z: 3,
      orient: 'vertical',
      left: 30,
      top: 60,
      textStyle: {
        fontSize: 14,
        color: '#edf8ff',
      },
    },
    radar: {
      center: ['50%', '50%'], // 外圆的位置
      radius: '55%',
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 16,
          fontWeight: 400,
          fontFamily: 'PingFangSC-Regular,PingFang SC',
          fontStyle: 'normal',
        }
      },
      // TODO:
      indicator: indicatorList, // 雷达图的指示器
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        }
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: 'rgba(255,255,255,0)'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#0ac8ff', // 分隔线颜色
          width: 3 // 分隔线线宽
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [50, 60, 40, 10, 0],
            name: '告警',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'rgba(255, 56, 56, 0.14)' // 0% 处的颜色
                  },
                    {
                      offset: 0.15, color: 'rgba(255, 56, 56, 0.14)' // 100% 处的颜色
                    },
                    {
                      offset: 0.75, color: 'rgba(255, 56, 56, 0.4)' // 100% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(255, 56, 56, 0.8)' // 100% 处的颜色
                    }],
                  global: false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: {
              //  width: 0
              color: 'rgba(255, 56, 56, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#ff6565',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#ff6565'
            },
          },
          {
            value: [80, 80, 80, 70, 60],
            name: '预警',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,194,255, 0.14)' // 0% 处的颜色
                  },
                    {
                      offset: 0.15, color: 'rgba(0,194,255, 0.14)' // 100% 处的颜色
                    },
                    {
                      offset: 0.75, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
                    }],
                  global: false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: {
              //  width: 0
              color: 'rgba(0, 194, 255, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00c8ff',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00c8ff'
            },
          },
          {
            value: [50, 40, 70, 50, 60],
            name: '缺陷',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'rgba(255, 220, 56, 0.14)' // 0% 处的颜色
                  },
                    {
                      offset: 0.15, color: 'rgba(255, 220, 56, 0.14)' // 100% 处的颜色
                    },
                    {
                      offset: 0.75, color: 'rgba(255, 220, 56, 0.4)' // 100% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(255, 220, 56, 0.8)' // 100% 处的颜色
                    }],
                  global: false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: {
              //  width: 0
              color: 'rgba(255, 220, 56, 0.8)',
              shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#cdbd3e',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#cdbd3e'
            },
          },
          {
            value: [0, 0, 10, 30, 70],
            name: '巡检',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'rgba(13, 248, 172, 0.14)' // 0% 处的颜色
                  },
                    {
                      offset: 0.15, color: 'rgba(13, 248, 172, 0.14)' // 100% 处的颜色
                    },
                    {
                      offset: 0.75, color: 'rgba(13, 248, 172, 0.4)' // 100% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(13, 248, 172, 0.8)' // 100% 处的颜色
                    }],
                  global: false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: {
              //  width: 0
              color: 'rgba(13, 248, 172, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00ffb4',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00ffb4'
            },
          },
        ]
      }
    ]
  }
  myChart.setOption(option)
})


</script>

<template>
  <div class="right-bottom">
    <div class="title">
      <p>渠道统计</p>
      <img src="../../images/dataScreen-title.png" alt="">
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style scoped xml:lang="scss">

.right-bottom {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;

  .title {
    margin-left: 10px;

    p {
      color: white;
      font-size: 20px;
    }
  }
}
.charts {
  width: 100%;
  height: calc(100% - 45px);
}

</style>